<template>
  <div>
    <el-row style="padding-top: 10px;padding-bottom: 10px">
      <el-col :offset="17" span="3" style="width:150px;padding-left: 20px">

        <el-select
          v-model='deviceTypeId'
          placeholder="所有设备"
          size="mini"
          @focus="getDeviceTypes"
          append-to-body
        >
          <el-option
            v-for="item in deviceTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col span="2" style="padding-left: 10px">
        <el-select
          v-model="blockId"
          placeholder="区域块"
          size="mini"
          @focus="getBlocks"
        >
          <el-option
            v-for="item in blockList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col span="2" style="padding-left: 10px">
        <el-button size="mini" @click="getDeviceNum(blockId,deviceTypeId)">
          统计
        </el-button>
      </el-col>
    </el-row>
    <el-scrollbar
      wrapClass="scrollbar-wrap"
      style="background-color: white"
      :style="{
        height: scrollHeight,
        // width: scrollWidth
      }"
      ref="scrollbarContainer">
      <div>
        <div style="background-color: white">
          <div class="head">
            <el-row>
              <div v-for="item in totalDeviceNum">
                <el-col :span="2" style="padding-bottom: 20px;padding-top: 10px">
                  <li style="font-size: 20px;float:left;">
                    {{item.deviceTypeName}}:{{item.number}}
                  </li>
                </el-col>
              </div>
            </el-row>
          </div>

          <template>
            <div v-for="item in deviceNumOfBlock">
              <div style="width: 50%;float: left">
                <el-row>
                  <template>
                    <ve-pie :data="item.chartData" :data-empty="item.dataEmpty" :events="item.chartEvents"></ve-pie>
                  </template>
                </el-row>
                <el-row>
                  <el-col :span="8" :offset="8">
                    <li style="text-align: center;padding-bottom: 20px">{{item.block}}&nbsp;总数:{{item.sum}}</li>
                  </el-col>
                </el-row>
              </div>
            </div>
          </template>
<!--          <template>-->
<!--              <div v-for="item in deviceNumOfBlock" style="width: 50%;float: left">-->
<!--                <el-row>-->
<!--                  <template>-->
<!--                    <ve-pie :data="item.chartData" :data-empty="item.dataEmpty" :events="item.chartEvents"></ve-pie>-->
<!--                  </template>-->
<!--                </el-row>-->
<!--                <el-row>-->
<!--                  <el-col :span="8" :offset="8">-->
<!--                    <li style="text-align: center;padding-bottom: 20px">{{item.block}}</li>-->
<!--                  </el-col>-->
<!--                </el-row>-->
<!--              </div>-->
<!--          </template>-->


<!--          <el-row style="padding-bottom: 60px">-->
<!--            <el-col :span="10" offset="1">-->
<!--              <el-row :gutter="20" style="padding-bottom: 20px">-->
<!--                <el-col span="8">-->
<!--                  <div style="margin: 0 0 0 100px">-->
<!--                    <li class="el-icon-info">当周</li>-->
<!--                  </div>-->
<!--                </el-col>-->
<!--                <el-col span="8">-->
<!--                  &lt;!&ndash;              <el-button class="el-icon">总耗能</el-button>&ndash;&gt;-->
<!--                </el-col>-->
<!--                <el-col span="8">-->
<!--                  <el-select-->
<!--                    v-model = "chartTypeWeek"-->
<!--                    placeholder="统计图切换"-->
<!--                    size="mini"-->
<!--                    @change="selectTypeWeek"-->
<!--                  >-->
<!--                    <el-option-->
<!--                      v-for="item in typeArr"-->
<!--                      :key="item.value"-->
<!--                      :label="item.label"-->
<!--                      :value="item.value"-->
<!--                    >-->
<!--                    </el-option>-->
<!--                  </el-select>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--              <el-row>-->
<!--                <template>-->
<!--                  <ve-chart :data="chartData1" :settings="chartSettingsWeek"></ve-chart>-->
<!--                </template>-->
<!--              </el-row>-->
<!--              <el-row>-->
<!--                <el-col span="8" offset="10">-->
<!--                  <li style="font-size: 15px">能耗:4396度</li>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </el-col>-->
<!--            <el-col :span="10" offset="1">-->
<!--              <el-row :gutter="20" style="padding-bottom: 20px">-->
<!--                <el-col span="8">-->
<!--                  <div style="margin: 0 0 0 100px">-->
<!--                    <li class="el-icon-info">当月</li>-->
<!--                  </div>-->
<!--                </el-col>-->
<!--                <el-col span="8">-->
<!--                  &lt;!&ndash;              <el-button class="el-icon">总耗能</el-button>&ndash;&gt;-->
<!--                </el-col>-->
<!--                <el-col span="8">-->
<!--                  <el-select-->
<!--                    v-model = "chartTypeMonth"-->
<!--                    placeholder="统计图切换"-->
<!--                    size="mini"-->
<!--                    @change="selectTypeMonth"-->
<!--                  >-->
<!--                    <el-option-->
<!--                      v-for="item in typeArr"-->
<!--                      :key="item.value"-->
<!--                      :label="item.label"-->
<!--                      :value="item.value"-->
<!--                    >-->
<!--                    </el-option>-->
<!--                  </el-select>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--              <el-row>-->
<!--                <template>-->
<!--                  <ve-chart :data="chartData1" :settings="chartSettingsMonth"></ve-chart>-->
<!--                </template>-->
<!--              </el-row>-->
<!--              <el-row>-->
<!--                <el-col span="8" offset="10">-->
<!--                  <li style="font-size: 15px">能耗:4396度</li>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row>-->
<!--            <el-col :span="10" offset="1">-->
<!--              <el-row :gutter="20" style="padding-bottom: 20px">-->
<!--                <el-col span="8">-->
<!--                  <div style="margin: 0 0 0 80px">-->
<!--                    <li class="el-icon-info">当季度</li>-->
<!--                  </div>-->
<!--                </el-col>-->
<!--                <el-col span="8">-->
<!--                  &lt;!&ndash;              <el-button class="el-icon">总耗能</el-button>&ndash;&gt;-->
<!--                </el-col>-->
<!--                <el-col span="8">-->
<!--                  <el-select-->
<!--                    v-model = "chartTypeQuarter"-->
<!--                    placeholder="统计图切换"-->
<!--                    size="mini"-->
<!--                    @change="selectTypeQuarter"-->
<!--                  >-->
<!--                    <el-option-->
<!--                      v-for="item in typeArr"-->
<!--                      :key="item.value"-->
<!--                      :label="item.label"-->
<!--                      :value="item.value"-->
<!--                    >-->
<!--                    </el-option>-->
<!--                  </el-select>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--              <el-row>-->
<!--                <template>-->
<!--                  <ve-chart :data="chartData1" :settings="chartSettingsQuarter"></ve-chart>-->
<!--                </template>-->
<!--              </el-row>-->
<!--              <el-row>-->
<!--                <el-col span="8" offset="10">-->
<!--                  <li style="font-size: 15px">能耗:4396度</li>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </el-col>-->
<!--            <el-col :span="10" offset="1">-->
<!--              <el-row :gutter="20" style="padding-bottom: 20px">-->
<!--                <el-col span="8">-->
<!--                  <div style="margin: 0 0 0 100px">-->
<!--                    <li class="el-icon-info">当年</li>-->
<!--                  </div>-->
<!--                </el-col>-->
<!--                <el-col span="8">-->
<!--                  &lt;!&ndash;              <el-button class="el-icon">总耗能</el-button>&ndash;&gt;-->
<!--                </el-col>-->
<!--                <el-col span="8">-->
<!--                  <el-select-->
<!--                    v-model = "chartTypeYear"-->
<!--                    placeholder="统计图切换"-->
<!--                    size="mini"-->
<!--                    @change="selectTypeYear"-->
<!--                  >-->
<!--                    <el-option-->
<!--                      v-for="item in typeArr"-->
<!--                      :key="item.value"-->
<!--                      :label="item.label"-->
<!--                      :value="item.value"-->
<!--                    >-->
<!--                    </el-option>-->
<!--                  </el-select>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--              <el-row>-->
<!--                <template>-->
<!--                  <ve-chart :data="chartData1" :settings="chartSettingsYear"></ve-chart>-->
<!--                </template>-->
<!--              </el-row>-->
<!--              <el-row style="padding-bottom: 60px">-->
<!--                <el-col span="8" offset="10">-->
<!--                  <li style="font-size: 15px">能耗:4396度</li>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </el-col>-->
<!--          </el-row>-->
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import Vue from 'vue'
  import VeLine from 'v-charts/lib/line.common'
  import VeHistogram from 'v-charts/lib/histogram.common'
  import VePie from 'v-charts/lib/pie.common'
  import VeChart from 'v-charts/lib/chart'
  import 'v-charts/lib/style.css'
  import App from "../../App";
  import Axios from "axios";

  // Vue.use(VeLine.name, VeLine);

  // new Vue({
  //   el: '#app',
  //   render: h => h(App)
  // });

  export default {
    components: {
      VeLine,
      VeHistogram,
      VePie,
      VeChart
    },

    data() {
      // this.typeArr = ['line','histogram','pie']
      this.extend = {
        'xAxis.0.axisLabel.rotate': 45
      };
      return {
        chartData: {
          columns: ['日期', '空调', '风扇', '灯光'],
          rows: [
            { '日期': '1/1', '空调': 1393, '风扇': 1093, '灯光': 250 },
            { '日期': '1/2', '空调': 3530, '风扇': 3230, '灯光': 369 },
            { '日期': '1/3', '空调': 2923, '风扇': 2623, '灯光': 775 },
            { '日期': '1/4', '空调': 1723, '风扇': 1423, '灯光': 456 },
            { '日期': '1/5', '空调': 3792, '风扇': 3492, '灯光': 159 },
            { '日期': '1/6', '空调': 4593, '风扇': 4293, '灯光': 678 }
          ]
        },
        chartData1: {
          columns:['类型','能耗'],
          rows:[
            {'类型': '空调','能耗': 1393},
            {'类型': '灯光','能耗': 1093},
            {'类型': '风扇','能耗': 793}
          ]
        },
        scrollHeight: '0px',
        chartTypeWeek: 'pie',
        chartTypeMonth: 'pie',
        chartTypeQuarter: 'pie',
        chartTypeYear: 'pie',
        typeArr: [
          {value: 'line',label: '折线'},
          {value: 'histogram',label: '柱形'},
          {value: 'pie',label: '饼图'}
        ],
        chartSettingsWeek: {type:'pie'},
        chartSettingsMonth: {type:'pie'},
        chartSettingsQuarter: {type:'pie'},
        chartSettingsYear: {type:'pie'},
        startTime: '',
        endTime: '',
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() >= Date.now() - 8.64e6;
          }
        },
        pickerOptions2: {},
        totalEC: 555,
        totalDeviceNum:{},
        deviceNumOfBlock:[],
        deviceTypeList:[],
        deviceTypeId: "",
        deviceTypeId1: "",
        blockList:[],
        blockId:"",
        blockId1:""

      }
    },
    methods:{
      initOptions2($event) {
        //设置结束时间时间范围
        console.log($event.getTime());
        console.log(Date.now());
        this.pickerOptions2 = {
          disabledDate(time) {
            return time.getTime() < $event.getTime() - 8.64e7 + 1;
          }
        };
      },
      selectTypeWeek(){
        console.log(this.chartTypeWeek)
        this.chartSettingsWeek = {type: this.chartTypeWeek}
      },
      selectTypeMonth(){
        console.log(this.chartTypeMonth)
        this.chartSettingsMonth = {type: this.chartTypeMonth}
      },
      selectTypeQuarter(){
        this.chartSettingsQuarter = {type: this.chartTypeQuarter}
      },
      selectTypeYear(){
        this.chartSettingsYear = {type: this.chartTypeYear}
      },

      getBlocks(){
        this.blockId = ''
        this.blockList = []
        Axios.get(this.api + 'block/getBlocks',{
          headers:{'X-Requested-With': 'XMLHttpRequest'},
          withCredentials: true
        }).then(res => {
          for (let i = 0;i<res.data.length;i++){
            this.blockList.push({label:res.data[i].name,value:res.data[i].id})
          }
        }).catch(()=>{
          console.log('请求失败！')
        })
      },

      getDeviceTypes(){
        this.deviceTypeId = ''
        this.deviceTypeList = []
        Axios.get(this.api+'types',{
          headers:{'X-Requested-With': 'XMLHttpRequest'},
          withCredentials: true
        }).then(res => {
          console.log(res.data)
          for (let i = 0;i<res.data.length;i++){
            this.deviceTypeList.push({label:res.data[i].name,value:res.data[i].id})
          }
        })
      },

      getDeviceNum(blockId,deviceTypeId){
        let self = this;
        self.deviceNumOfBlock =[]
        Axios.get(this.api+'getDeviceNum',{
          params: {
            'blockId': blockId,
            'deviceTypeId': deviceTypeId
          },
          headers:{'X-Requested-With':'XMLHttpRequest'},
          withCredentials: true
        }).then(res => {
          self.totalDeviceNum = res.data.totalDeviceNum
          let deviceNum = Object.keys(res.data.deviceNumOfBlock).map(key => {
            return res.data.deviceNumOfBlock[key]
          })

          deviceNum.forEach(item =>{
            let sum = 0
            let table = []
            let isNull = false
            if (item.deviceNum.length === 0) {
              isNull = true
            }else {
              for(let i = 0;i<item.deviceNum.length;i++){
                sum += item.deviceNum[i].number
                table.push({'类型':item.deviceNum[i].deviceTypeName,'数量':item.deviceNum[i].number})
              }
            }
            // if (table)
            self.deviceNumOfBlock.push(
              {
                block: item.blockName,
                blockId: item.blockId,
                sum: sum,
                dataEmpty: isNull,
                chartData: {
                  columns: ['类型','数量'],
                  rows: table
                },
                chartEvents: {
                  click: function (e) {
                    self.getDeviceTypeId(e.name)
                    self.$router.push({
                      path: "/admin",
                      query: { deviceTypeId: self.deviceTypeId1,blockId: item.blockId }
                    });
                    console.log(e.name+self.deviceTypeId1)
                  }
                }
              }
            )
            console.log(self.deviceNumOfBlock)
          })
        }).catch(error => {//失败返回
            console.log(error);
          })
      },
      getDeviceTypeId(name){
        this.deviceTypeList.forEach(type => {
          if (type.label === name){
            this.deviceTypeId1 = type.value
          }
        })
      }
    },
    mounted(){
      this.scrollHeight = window.innerHeight*0.90 + 'px'
      this.getDeviceNum()
      this.getDeviceTypes()
    }
  }
</script>

<style>
  .el-scrollbar__wrap{
    height: 90%;
    overflow-x: hidden;
  }
  /*.scrollbar-wrap{*/
  /*  overflow-x: hidden;*/
  /*}*/
</style>
